<script setup>
import { onMounted, onUnmounted, defineProps, defineEmits, defineExpose } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

const props = defineProps({
  center: { type: Array, default: () => [116.397428, 39.90923] }, // 默认中心点（北京）
  zoom: { type: Number, default: 15 }, // 默认缩放级别
});

const emit = defineEmits(['updatePosition', 'locationFetched']); // 定义事件发射

let map = null; // 地图实例
let marker = null; // 标记点实例
let geocoder = null; // 地理编码实例
let autocomplete = null; // 自动完成实例

onMounted(() => {
  // 配置高德地图的安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: '5535848d117ffec3e2bda1998acb9ec8',
  };

  // 加载高德地图API
  AMapLoader.load({
    key: '127f1aaa933e34242c2c7cb9d9ce94a7', // API Key
    version: '2.0', // API版本
    plugins: [
      'AMap.Scale',
      'AMap.Geolocation',
      'AMap.Geocoder',
      'AMap.AutoComplete',
      'AMap.ToolBar', // 添加工具栏插件，确保事件系统加载
    ], // 显式加载更多插件
  })
      .then((AMap) => {
        console.log('AMap 已加载:', AMap); // 调试：确认 AMap 是否加载成功

        // 初始化地图
        map = new AMap.Map('container', {
          viewMode: '3D', // 3D视图模式
          zoom: props.zoom, // 缩放级别
          center: props.center, // 中心点坐标
        });

        // 等待地图加载完成
        map.on('complete', () => {
          console.log('地图加载完成'); // 调试：确认地图加载完成

          // 初始化标记点
          marker = new AMap.Marker({
            position: props.center, // 初始位置
            draggable: true, // 可拖拽
          });
          map.add(marker);

          // 初始化地理编码和自动完成
          geocoder = new AMap.Geocoder();
          autocomplete = new AMap.AutoComplete();

          console.log('Autocomplete 初始化:', autocomplete); // 调试：检查 autocomplete 是否初始化

          // 设置标记点的拖拽结束事件
          marker.on('dragend', () => {
            const position = marker.getPosition();
            emit('updatePosition', { lng: position.lng, lat: position.lat });
          });

          // 检查事件系统并绑定监听器
          if (AMap.event && autocomplete) {
            console.log('绑定自动完成事件监听器'); // 调试：确认事件绑定
            AMap.event.addListener(autocomplete, 'select', (e) => {
              const poi = e.poi;
              if (poi && poi.location) {
                const lnglat = [poi.location.lng, poi.location.lat];
                map.setCenter(lnglat); // 设置地图中心
                marker.setPosition(lnglat); // 更新标记位置
                emit('updatePosition', { lng: poi.location.lng, lat: poi.location.lat }); // 发射位置更新事件
              }
            });
          } else if (autocomplete && autocomplete.on) {
            // 备用方案：直接使用 autocomplete 的 on 方法绑定事件
            console.log('使用备用方案绑定事件');
            autocomplete.on('select', (e) => {
              const poi = e.poi;
              if (poi && poi.location) {
                const lnglat = [poi.location.lng, poi.location.lat];
                map.setCenter(lnglat);
                marker.setPosition(lnglat);
                emit('updatePosition', { lng: poi.location.lng, lat: poi.location.lat });
              }
            });
          } else {
            console.error('无法绑定自动完成事件', {
              eventAvailable: !!AMap.event,
              autocomplete: autocomplete,
            });
          }
        });
      })
      .catch((e) => {
        console.error('地图加载失败：', e);
      });
});

onUnmounted(() => {
  // 清理地图实例
  if (map) {
    map.destroy();
    map = null;
  }
});

// 获取当前位置
const getCurrentLocation = () => {
  if (!map || !window.AMap) return;

  const geolocation = new window.AMap.Geolocation({
    enableHighAccuracy: true, // 高精度定位
    timeout: 10000, // 超时时间
    buttonPosition: 'RT', // 定位按钮位置
    buttonOffset: new window.AMap.Pixel(10, 20), // 按钮偏移
    zoomToAccuracy: true, // 定位成功后调整视野
  });

  map.addControl(geolocation);

  geolocation.getCurrentPosition((status, result) => {
    console.log('定位结果：', status, result);
    if (status === 'complete') {
      const lnglat = [result.position.lng, result.position.lat];
      map.setCenter(lnglat);
      marker.setPosition(lnglat);
      emit('locationFetched', lnglat); // 发射定位完成事件
    } else {
      let errorMessage = '获取位置失败';
      if (result.message.includes('permission denied')) {
        errorMessage = '定位权限被拒绝，请启用定位权限并使用HTTPS协议';
      } else if (result.message.includes('timeout')) {
        errorMessage = '定位请求超时';
      }
      alert(errorMessage);
    }
  });
};

// 搜索地址
const searchAddress = (address) => {
  if (!autocomplete || !address) return;

  autocomplete.search(address, (status, result) => {
    if (status === 'complete' && result.tips && result.tips.length > 0) {
      const tip = result.tips[0];
      if (tip.location) {
        const lnglat = [tip.location.lng, tip.location.lat];
        map.setCenter(lnglat);
        marker.setPosition(lnglat);
        emit('updatePosition', { lng: tip.location.lng, lat: tip.location.lat });
      }
    } else {
      console.error('地址搜索失败：', result);
    }
  });
};

// 逆地理编码（获取地址）
const getAddress = (lnglat, callback) => {
  if (!geocoder || !lnglat) return;

  geocoder.getAddress(lnglat, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      callback(result.regeocode.formattedAddress); // 返回格式化地址
    } else {
      console.error('逆地理编码失败：', result);
    }
  });
};

// 暴露方法给外部组件
defineExpose({
  getCurrentLocation,
  searchAddress,
  getAddress,
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>